<template>
  <VSnakeModal v-model="visible" :modalTitle="modalTitle" style="width: 28rem; height: 18rem;">
    123
  </VSnakeModal>
</template>

<script>

export default {
  name: 'DailyAttendanceModal',
  components: {
  },
  data() {
    return {
      visible: false,
      modalTitle: '每日签到',
      active: 0,
      propList: [
        { code: 'fuhu',label: '复活卡'},
        { code: 'speed',label: '加速卡'},
        { code: 'hundun',label: '护盾卡'},
        { code: 'shuangb',label: '双倍卡'},
        { code: 'addleng',label: '加长卡'},
      ],
    };
  },

  mounted() {
    
  },

  methods: {
    openModal() {
      this.visible = true
      this.active = 0
    },
    gotoExchange() {
      this.visible = false
      this.$emit('gotoExchange')
    }
  },
};
</script>

<style lang="scss">
.backpack-panel {
  height: -webkit-fill-available;
  .van-tabs__content {
    height: 100%;
  }
  .van-tab__pane {
    height: 100%;
  }
  .my-prize-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .my-game-prop {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    .prop-item {
      flex-shrink: 0;
      width: 5.8rem;
      height: 7.4rem;
      border: 0.1rem solid rgb(255, 161, 161);
      border-radius: 0.5rem;
      margin: 0.25rem;
    }
    .prop-label {
      text-align: center;
      font-size: 0.8rem;
      line-height: 1.5rem;
    }
    .prop-icon {
      width: 2rem;
      height: 2rem;
      background-color: #f00;
      border-radius: 50%;
      margin: 0.3rem auto;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .exchange-btn {
      text-align: center;
      .van-button {
        border-radius: 1rem;
        background-color: #f00;
        color: #fff;
      }
    }
  }
}
</style>